<template>
	<view :class="themeName">
		<u-tabs font-size="28" name="tabsName" inactive-color="#333" active-color="rgba(0, 50, 50, 1)" :list="lists"
			:is-scroll="false" :current="current" @change="change">
		</u-tabs>

		<block v-for="(items, index) in lists" :key="index">
			<mescroll-uni v-if="items.isShow === true" ref="mescrollRef" bgColor="white" top="100rpx"
				@init="mescrollInit" :up="upOption" @down="downCallback" @up="upCallback">
				<block v-for="(item, cIndex) in list" :key="cIndex">
					<view class="m-b-24 p-l-24 p-r-24">
						<coupon-card mode='get' :desc="{title: $zhTran('使用说明'), content: item.tips}" :name="item.name"
							:money="item.money" :condition="item.condition" :time="item.effective_time"
							:scene="item.use_scene" :order_type_arr="item.order_type_arr" :coupon-id="item.id"
							:coupon-list-id="item.CL_id" :gotten="item.is_get"
							:button="{ name: $zhTran(getBtn), theme: getBtn=='去使用'?'primary':'disable' }"
							@button="getCoupon" />
					</view>
				</block>
				<w-jishuzhichi :class="[{'jishuzhichi-nodata':list.length == 0}]" />
			</mescroll-uni>
		</block>

	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import couponCard from '@/bundle/components/coupon-card/coupon-card.vue'
	import {
		apiCouponGet
	} from '@/api/activity';
	export default {
		mixins: [MescrollMixin],
		components: {
			couponCard
		},
		data() {
			return {
				lists: [{
					tabsName: this.$zhTran('可使用(0)'),
					isShow: true,
					type: 0
				}, {
					tabsName: this.$zhTran('已使用(0)'),
					isShow: false,
					type: 1
				}, {
					tabsName: this.$zhTran('部分使用(0)'),
					isShow: false,
					type: 4
				}, {
					tabsName: this.$zhTran('已过期(0)'),
					isShow: false,
					type: 2
				}],
				current: 0,

				list: [], //优惠券的数据

				extend: {},

				showTips: [],
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/coupon.png'),
						tip: this.$zhTran('暂无优惠券数据'), // 提示
						fixed: true,
						top: "200rpx",
					}
				}
			}
		},

		computed: {
			getBtn() {
				let text = ''
				switch (this.lists[this.current].type) {
					case 0:
						text = '去使用';
						break;
					case 1:
						text = '已使用';
						break;
					case 4:
						text = '部分使用';
						break;
					case 2:
						text = '已过期';
						break;
				}
				return text
			}
		},

		methods: {
			change(index) {
				for (let i = 0; i < this.lists.length; i++) {
					this.lists[i].isShow = false
				}
				this.current = index;
				this.lists[index].isShow = true
			},

			upCallback({
				num,
				size
			}) {
				apiCouponGet({
					status: this.lists[this.current].type,
					page_no: num,
					page_size: size
				}).then(res => {
					this.lists[0].tabsName = `${this.$zhTran('可使用')}(${res.extend.normal})`
					this.lists[1].tabsName = `${this.$zhTran('已使用')}(${res.extend.use})`
					this.lists[2].tabsName = `${this.$zhTran('部分使用')}(${res.extend.part})`
					this.lists[3].tabsName = `${this.$zhTran('已过期')}(${res.extend.expiry})`
					if (num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(res.lists); //追加新数据
					this.list = this.$zhTran(this.list)
					this.mescroll.endSuccess(res.lists.length, res.count);
				}).catch(err => {
					this.mescroll.endErr()
				})
			},

			getCoupon() {
				if (this.current == 0) {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
			}
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		}
	}
</script>

<style lang="scss">
	.coupon-list {
		padding: 0 24rpx;
		overflow: hidden;

	}
</style>